<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>我的三中恋爱物语果然没问题</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    :root{
      --bg:#081423;
      --panel: rgba(255,255,255,0.02);
      --bubble:#0f2330;
      --muted:#9fb0c8;
      --text:#eaf4ff;
      --accent:#6fc3ff;
      --avatar-size:44px;
      --button-bg: rgba(111, 195, 255, 0.1);
      --button-hover: rgba(111, 195, 255, 0.2);
      --button-disabled: rgba(159, 176, 200, 0.1);
      --button-border: 1px solid rgba(111, 195, 255, 0.3);
    }
    html,body{ height:100%; margin:0; font-family: "Microsoft Yahei", "Segoe UI", Roboto, Arial; background:linear-gradient(180deg,var(--bg),#04131a); color:var(--text); }

    /* 整体容器 */
    .game-container {
      max-width:900px;
      margin:28px auto;
      padding:0;
      position:relative;
    }

    /* 演出系统容器 */
    .show-root {
      padding:12px;
      border-radius:10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
    }

    /* 提示（轻微） */
    .hint {
      font-size:13px;
      color:var(--muted);
      margin-bottom:8px;
    }

    /* 生命线 / 列表 */
    .timeline {
      background: rgba(0,0,0,0.12);
      border-radius:10px;
      padding:10px;
      height:90vh;
      overflow:auto;
      border:1px solid rgba(255,255,255,0.03);
    }

    .line {
      display:flex;
      gap:10px;
      align-items:flex-start;
      margin:10px 6px;
      opacity:0;
      transform: translateY(8px);
      transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .28s ease;
    }
    .line.show { opacity:1; transform:translateY(0); }

    /* 头像 */
    .avatar {
      width:var(--avatar-size);
      height:var(--avatar-size);
      border-radius:50%;
      flex-shrink:0;
      overflow:hidden;
      border:2px solid rgba(255,255,255,0.04);
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(180deg,#123149,#0b2a3e);
      color:var(--text);
      font-weight:700;
    }
    .avatar img { width:100%; height:100%; object-fit:cover; display:block; }

    /* 对话泡 */
    .bubble {
      background:var(--bubble);
      padding:10px 12px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.02);
      max-width:80%;
      word-break:break-word;
    }
    .meta { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
    .name { font-weight:700; color:var(--accent); font-size:13px; }
    .time { font-size:12px; color:var(--muted); }
    .text { color:var(--text); font-size:15px; line-height:1.4; white-space:pre-wrap; }

    /* 旁白居中样式 */
    .narration {
      justify-content:center;
    }
    .narration .bubble {
      background:transparent;
      border:0;
      color:var(--muted);
      font-style:italic;
      max-width:90%;
      text-align:center;
      padding:6px 10px;
    }

    /* 图片型旁白（居中显示大图） */
    .img-narration {
      justify-content:center;
    }
    .img-narration .bubble {
      background:transparent;
      border:0;
      padding:6px;
    }
    .img-narration .bubble img {
      max-width:640px;
      width:100%;
      border-radius:8px;
      display:block;
      box-shadow:0 8px 20px rgba(0,0,0,0.6);
    }

    /* 阶段系统样式 */
    .stage-root {
      display:none;
      padding:12px;
      border-radius:10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
    }

    /* 阶段标题 */
    .stage-title {
      font-size:24px;
      font-weight:700;
      color:var(--accent);
      text-align:center;
      margin-bottom:8px;
      padding:12px;
      background: rgba(111, 195, 255, 0.05);
      border-radius:8px;
      border:1px solid rgba(111, 195, 255, 0.1);
    }
    
    .stage-description {
      font-size:14px;
      color:var(--muted);
      text-align:center;
      margin-bottom:16px;
      padding:8px 12px;
      background: rgba(159, 176, 200, 0.05);
      border-radius:6px;
      border:1px solid rgba(159, 176, 200, 0.1);
    }

    /* 场景图片 */
    .stage-image-container {
      margin-bottom:20px;
      border-radius:8px;
      overflow:hidden;
      box-shadow:0 8px 20px rgba(0,0,0,0.5);
      transition: transform 0.3s ease;
    }
    .stage-image-container:hover {
      transform: scale(1.01);
    }
    .stage-image {
      width:100%;
      height:auto;
      display:block;
    }

    /* 操作按钮容器 */
    .slots-container {
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top:24px;
    }

    /* 操作按钮样式 */
    .slot-button {
      padding:16px 20px;
      background:var(--button-bg);
      color:var(--text);
      border:var(--button-border);
      border-radius:8px;
      font-size:16px;
      font-weight:500;
      cursor:pointer;
      transition: all 0.2s ease;
      text-align:left;
      position:relative;
      overflow:hidden;
    }
    .slot-button::before {
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg, transparent, rgba(111, 195, 255, 0.1), transparent);
      transition: left 0.5s ease;
    }
    .slot-button:hover {
      background:var(--button-hover);
      transform: translateY(-1px);
      box-shadow:0 4px 12px rgba(111, 195, 255, 0.2);
    }
    .slot-button:hover::before {
      left:100%;
    }
    .slot-button:active {
      transform: translateY(0);
    }
    .slot-button:disabled {
      background:var(--button-disabled);
      color:var(--muted);
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }
    .slot-button:disabled::before {
      display:none;
    }

    /* 移动设备响应式 */
    @media(max-width:640px){
      .timeline {
        height:85vh;
        padding:8px;
      }
      .avatar {
        width:38px;
        height:38px;
      }
      .bubble {
        padding:8px 10px;
      }
      .stage-title {
        font-size:20px;
        padding:10px;
      }
      .slot-button {
        padding:14px 16px;
        font-size:15px;
      }
    }
  </style>
</head>
<body>
  <div class="game-container">
    <!-- 演出系统容器 -->
    <div class="show-root" id="showRoot" aria-live="polite">
      <div class="hint" id="hintText">我的三中恋爱物语果然没问题</div>
      <div class="timeline" id="timeline"></div>
    </div>

    <!-- 阶段系统容器 -->
    <div class="stage-root" id="stageRoot">
      <div class="stage-title" id="stageTitle"></div>
      <div class="stage-description" id="stageDescription"></div>
      <div class="stage-image-container">
        <img class="stage-image" id="stageImage" alt="场景图片">
      </div>
      <div class="slots-container" id="slotsContainer"></div>
    </div>
  </div>

  <script src="https://tam.cdn-go.cn/aegis-sdk/latest/aegis.min.js"></script>
    <script type="module">
      // 导入uid并设置到hint元素
      import {uid} from './init.js';
      document.getElementById('hintText').textContent = 'uid: ' + uid;
    </script>
    <script src="data.js" type="module"></script>
    <script src="init.js" type="module"></script>
    <script type="module">
    /* 演出系统核心（接受一个 Show 对象）:
       - 每次点击播放一条 dialogue（append 到 timeline）
    */
   import {DIALOGUE_TYPE} from './engine.js';
    (function(){
      const timeline = document.getElementById('timeline');
      const root = document.getElementById('showRoot');

      let currentShow = null;
      let index = 0;
      let stopped = false;

      // 点击任意位置播放下一条（如果在播放中）
      root.addEventListener('click', () => {
        if (!currentShow) return;
        if (stopped) return;
        playNext();
      });

      // 创建并插入一行 DOM
      function appendLineDOM(dlg) {
        const wrapper = document.createElement('div');
        wrapper.className = 'line';

        const type = dlg.getType();

        if (type === DIALOGUE_TYPE.narrator) {
          wrapper.classList.add('narration');
          const bubble = document.createElement('div');
          bubble.className = 'bubble';
          bubble.textContent = dlg.content;
          wrapper.appendChild(bubble);

        } else if (type === DIALOGUE_TYPE.imgNarrator) {
          wrapper.classList.add('img-narration');
          const bubble = document.createElement('div');
          bubble.className = 'bubble';
          const img = document.createElement('img');
          img.src = dlg.img;
          img.alt = dlg.content || '';
          bubble.appendChild(img);
          if (dlg.content) {
            const caption = document.createElement('div');
            caption.className = 'text';
            caption.style.marginTop = '8px';
            caption.style.textAlign = 'center';
            caption.style.color = 'var(--muted)';
            caption.textContent = dlg.content;
            bubble.appendChild(caption);
          }
          wrapper.appendChild(bubble);

        } else { // lines: 有人物台词，左侧小头像 + 泡
          const avatarWrap = document.createElement('div');
          avatarWrap.className = 'avatar';
          if (dlg.avatar) {
            const img = document.createElement('img');
            img.src = dlg.avatar;
            img.alt = dlg.heroine ? dlg.heroine.name : 'avatar';
            img.onerror = function(){ this.style.display='none'; };
            avatarWrap.appendChild(img);
          } else {
            avatarWrap.textContent = initialLetters(dlg.heroine ? dlg.heroine.name : dlg.heroine.id || '？');
          }

          const bubble = document.createElement('div');
          bubble.className = 'bubble';

          const meta = document.createElement('div');
          meta.className = 'meta';
          const name = document.createElement('div');
          name.className = 'name';
          name.textContent = dlg.heroine ? dlg.heroine.name : '？';
          const time = document.createElement('div');
          time.className = 'time';
          // 简单时间戳
          //time.textContent = (new Date()).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
          meta.appendChild(name);
          //meta.appendChild(time);

          const text = document.createElement('div');
          text.className = 'text';
          text.textContent = dlg.content;

          bubble.appendChild(meta);
          bubble.appendChild(text);

          wrapper.appendChild(avatarWrap);
          wrapper.appendChild(bubble);
        }

        timeline.appendChild(wrapper);
        // 动画（触发过渡）
        requestAnimationFrame(() => wrapper.classList.add('show'));
        // 滚到底部
        timeline.scrollTop = timeline.scrollHeight;
      }

      function initialLetters(name) {
        if (!name) return '?';
        const parts = name.trim().split(/\s+/);
        if (parts.length === 1) return parts[0].slice(0,2).toUpperCase();
        return (parts[0][0] + parts[1][0]).toUpperCase();
      }

      // 播放下一条：将下一条追加到列表并推进 index
      function playNext() {
        if (!currentShow) return;
        if (index >= currentShow.dialogueList.length) {
          // 已结束，重置状态并 resolve Promise
          const resolve = showPromiseResolve;
          currentShow = null;
          index = 0;
          stopped = false;
          showPromiseResolve = null;
          // resolve Promise
          resolve();
          return;
        }
        const dlg = currentShow.dialogueList[index];
        appendLineDOM(dlg);
        index++;
      }

      let showPromiseResolve = null;

      // 对外 API：playShow(show) - 返回 Promise 支持 await
      window.playShow = function(show, bClear = true) {
        // 如果已有正在进行的 show，则先停止它
        if (currentShow) {
          currentShow = null;
        }
        if (bClear) {
          clearShowHistory();
        }
        showShowUI(); //切换到演出模式
        // 重置状态
        currentShow = show;
        index = 0;
        stopped = false;
        showPromiseResolve = null;
        
        // 返回 Promise 以便使用 await
        return new Promise((resolve) => {
          showPromiseResolve = resolve;
        });
        // 说明：首次点击会触发播放第一条；也可以直接自动播放第一条，这里严格按“玩家点一下播放一条”的要求，不预先播放。
      };

      // 停止当前演出
      window.stopShow = function() {
        if (!currentShow) return;
        stopped = true;
        currentShow = null;
        finishCallback = null;
      };

      // 清空历史展示（可选）
      window.clearShowHistory = function() {
        timeline.innerHTML = '';
      };
    })();

    /* 阶段系统核心 */
    (function() {
      const stageRoot = document.getElementById('stageRoot');
      const showRoot = document.getElementById('showRoot');
      const stageTitle = document.getElementById('stageTitle');
      const stageImage = document.getElementById('stageImage');
      const slotsContainer = document.getElementById('slotsContainer');

      // 切换到阶段系统界面
      window.playStage = function(stage) {
        // 隐藏演出界面
        showRoot.style.display = 'none';
        // 显示阶段界面
        stageRoot.style.display = 'block';

        // 设置阶段标题
        stageTitle.textContent = stage.title || '';
        
        // 设置阶段描述
        const stageDescription = document.getElementById('stageDescription');
        if (stage.describe) {
          stageDescription.textContent = stage.describe;
          stageDescription.style.display = 'block';
        } else {
          stageDescription.style.display = 'none';
        }
        
        // 设置场景图片
        if (stage.img) {
          stageImage.src = stage.img;
          stageImage.alt = stage.title || '场景图片';
          stageImage.style.display = 'block';
        } else {
          stageImage.style.display = 'none';
        }

        // 清空并填充操作按钮
        slotsContainer.innerHTML = '';
        if (stage.slotList && Array.isArray(stage.slotList)) {
          stage.slotList.forEach(slot => {
            const button = document.createElement('button');
            button.className = 'slot-button';
            button.textContent = slot.describe || '';
            // 检查是否解锁
            button.disabled = !slot.isUnlock();
            
            // 添加点击事件
            button.addEventListener('click', () => {
              if (typeof slot.trigger === 'function') {
                slot.trigger();
              }
            });
            
            slotsContainer.appendChild(button);
          });
        }
      };

      // 切换回演出系统界面
      window.showShowUI = function() {
        // 隐藏阶段界面
        stageRoot.style.display = 'none';
        // 显示演出界面
        showRoot.style.display = 'block';
      };
    })();

    /* ===== 示例：如何构造 Show 并调用（仅示例，可删除/替换） =====
       1) 在游戏事件里构造一个 show 对象（实例化 Show），把若干 Dialogue 放进去
       2) 调用 playShow(theShow) ，玩家每点一次页面会播放一条对话，直到演出结束，返回的 Promise resolve
    */
    // 示例数据（可删除）
    import { Show, Event, Slot, Stage, newNarratorDialogue, newLinesDialogue, newImgNarratorDialogue, } from './engine.js';
    import { Heroine } from './data.js';
    import {auv, zhi, sagi, hei, tang} from './init.js';
    import {s1} from './plot.js'
    import {morningClassroom} from './stage.js'

    (async function demo(){
      // 开始演出
      await playShow(s1);
      playStage(morningClassroom);
    })();

  </script>
</body>
</html>